﻿@page "/query-builder/template"

@using BlazorDemos
@using blazor_griddata
@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs
@using SFInputs = Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the Value Template functionality in QueryBuilder component using Slider, DropDownList and Checkbox components. In this sample, user can select the Value using DropDownList, Checkbox and Slider components for CustomerID, Verified and Salary columns respectively.</p>
</SampleDescription>
<ActionDescription>
    <p>
        This sample illustrates how to integrate <a target="" _blank="" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_ValueTemplate">ValueTemplate</a> to the columns in the QueryBuilder. This is used for creating custom user interface for the columns with custom components and update the rule collection by using the component events. This can be specified by using ValueTemplate directive of QueryBuilderColumn directive. Inside the Template, you can access the data using the implicit named parameter <strong>Context</strong>.
    </p>
    <p>More information about Blazor QueryBuilder Template can be found in this <a target="" _blank"" href=" https://blazor.syncfusion.com/documentation/query-builder/templates/#value-template">documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <SfQueryBuilder TValue="Orders" DataSource="@dataSource">
        <QueryBuilderRule Condition="and" Rules="@rules"></QueryBuilderRule>
        <QueryBuilderColumns>
            <QueryBuilderColumn Field="CustomerID" Label="CustomerID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String>
                <QueryBuilderTemplates>
                    <ValueTemplate>
                        @{
                            string value = (string)context.Value;
                        }
                        <SfDropDownList TValue="string" TItem="ItemFields" DataSource="@items" @bind-Value="@value">
                            <DropDownListFieldSettings Text="Id"></DropDownListFieldSettings>
                            <DropDownListEvents TItem="ItemFields" TValue="string" ValueChange="e => onChange(e, context)"></DropDownListEvents>
                        </SfDropDownList>
                    </ValueTemplate>
                </QueryBuilderTemplates>
            </QueryBuilderColumn>
            <QueryBuilderColumn Field="EmployeeID" Label="EmployeeID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Number></QueryBuilderColumn>
            <QueryBuilderColumn Field="Verified" Label="Verified" Type=ColumnType.Boolean>
                <QueryBuilderTemplates>
                    <ValueTemplate>
                        <SfCheckBox TChecked="bool" Label="Yes" ValueChange="e => checkboxChange(e, context)"></SfCheckBox>
                    </ValueTemplate>
                </QueryBuilderTemplates>
            </QueryBuilderColumn>
            <QueryBuilderColumn Field="ShipName" Label="ShipName" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Number>
            </QueryBuilderColumn>
            <QueryBuilderColumn Field="OrderDate" Label="OrderDate" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Date Format="dd/MM/yyyy"></QueryBuilderColumn>
            <QueryBuilderColumn Field="ShipCountry" Label="ShipCountry" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
            <QueryBuilderColumn Field="ShipAddress" Label="ShipAddress" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
            <QueryBuilderColumn Field="Salary" Label="Salary" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Number>
                <QueryBuilderTemplates>
                    <ValueTemplate>
                        @{
                            int value = (int)context.Value;
                        }
                        <SfSlider TValue="int" Min="0" Max="100" Value="@value">
                            <SliderEvents TValue="int" OnChange="e => sliderChange(e, context)"></SliderEvents>
                            <SliderTooltip IsVisible="true" Placement="@currentTooltipPlacement" ShowOn="@currentTooltipShowOn"></SliderTooltip>
                        </SfSlider>
                    </ValueTemplate>
                </QueryBuilderTemplates>
            </QueryBuilderColumn>
        </QueryBuilderColumns>
    </SfQueryBuilder>
</div>

@code{
    private List<Orders> dataSource;
    private SFInputs.TooltipPlacement currentTooltipPlacement = new TooltipPlacement();
    private SFInputs.TooltipShowOn currentTooltipShowOn = new TooltipShowOn();
    private bool done = true;
    private string checkboxValue;

    public class ItemFields
    {
        public string Id { get; set; }
    }

    private List<ItemFields> items = new List<ItemFields>() {
        new ItemFields(){ Id= "ALFKI" },
        new ItemFields(){ Id= "BOLID" },
        new ItemFields(){ Id= "ANTON" },
        new ItemFields(){ Id= "ANATR" }
    };

    private void onChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ItemFields> args, RuleModel rule)
    {
        rule.Value = args.Value;
    }

    private void sliderChange(Syncfusion.Blazor.Inputs.SliderChangeEventArgs<int> args, RuleModel rule)
    {
        rule.Value = args.Value;
    }

    private void checkboxChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args, RuleModel rule)
    {
        done = args.Checked;
        checkboxValue = done ? "Yes" : "No";
        rule.Value = checkboxValue;
    }

    protected override void OnInitialized()
    {
        dataSource = Orders.GetAllRecords();
    }

    private List<RuleModel> rules = new List<RuleModel>()
    {
        new RuleModel { Label="CustomerID", Field="CustomerID", Type="String", Operator="equal", Value= "BOLID" },
        new RuleModel { Label="EmployeeID", Field="EmployeeID", Type="Number", Operator="equal", Value = 1234 },
        new RuleModel { Condition = "or", Rules=new List<RuleModel>(){ new RuleModel{ Label= "ShipCountry", Field= "ShipCountry", Type="String", Operator="equal", Value = "Brazil" },
        new RuleModel { Label="ShipName", Field="ShipName", Type="String", Operator="equal", Value="Ferde" },
        new RuleModel { Label="Verified", Field="Verified", Type="Boolean", Operator="equal", Value="No"},
        new RuleModel { Condition="or", Rules = new List<RuleModel>(){ new RuleModel { Field="Salary", Label="Salary", Operator="equal", Type= "Number", Value=50 } } }  } }
    };
}

<style>
    .e-control-wrapper.e-slider-container.e-horizontal {
        height: 0;
    }
</style>
